<template>
  <div class="WaterAnalysis">
    <el-radio-group v-model="active" fill="#7b94d8">
      <el-radio-button label="1">付费数据</el-radio-button>
      <el-radio-button label="2">提现数据</el-radio-button>
      <el-radio-button label="3">利润报表</el-radio-button>
    </el-radio-group>
    <el-card v-if="active == 1">
      <div class="searchBox">
        <h3><span class="tt"></span> 付费总计</h3>
        <div>
          <el-radio-group v-model="type" size="small" fill="#7b94d8">
            <el-radio-button label="1">今日</el-radio-button>
            <el-radio-button label="2">本月</el-radio-button>
            <el-radio-button label="3">总计</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <el-row class="cardRow" :gutter="20">
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              总付费金额
            </h3>
            <h1>
              <i class="el-icon-coin"></i>
              300
            </h1>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              总付费人数
            </h3>
            <h1>
              <i class="el-icon-user"></i>
              300
            </h1>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 付费统计详情 -->
    <el-card v-if="active == 1" style="margin-top: 20px">
      <div class="searchBox">
        <h3>
          <div class="tt"></div>
          金币充值详情
        </h3>
        <div class="right">
          <span class="txt">性别：</span>
          <el-select
            class="sexselect"
            v-model="sex"
            placeholder="请选择性别"
            size="small"
          >
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="txt">平台：</span>
          <el-select
            class="channelselect"
            v-model="channel"
            placeholder="请选择平台"
            size="small"
          >
            <el-option label="不限" value=""> </el-option>
            <el-option label="苹果" value="1"> </el-option>
            <el-option label="安卓" value="2"> </el-option>
          </el-select>
          <span class="txt" style="margin-left: 10px">时间：</span>
          <el-date-picker
            size="small"
            v-model="timeArr"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="name" label="总充值金额"> </el-table-column>
        <el-table-column prop="address" label="充值人数"> </el-table-column>
        <el-table-column prop="address" label="新增充值金额"> </el-table-column>
        <el-table-column prop="address" label="留存充值人数"> </el-table-column>
        <el-table-column prop="address" label="留存充值金额"> </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- VIP付费统计详情 -->
    <el-card v-if="active == 1" style="margin-top: 20px">
      <div class="searchBox">
        <h3>
          <div class="tt"></div>
          VIP充值详情
        </h3>
        <div class="right">
          <span class="txt">性别：</span>
          <el-select
            class="sexselect"
            v-model="sex1"
            placeholder="请选择性别"
            size="small"
          >
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="txt">平台：</span>
          <el-select
            class="channelselect"
            v-model="channel1"
            placeholder="请选择平台"
            size="small"
          >
            <el-option label="不限" value=""> </el-option>
            <el-option label="苹果" value="1"> </el-option>
            <el-option label="安卓" value="2"> </el-option>
          </el-select>
          <span class="txt" style="margin-left: 10px">时间：</span>
          <el-date-picker
            size="small"
            v-model="timeArr1"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focusA"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        :data="tableData1"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="name" label="充值月度人数"> </el-table-column>
        <el-table-column prop="address" label="充值月度金额"> </el-table-column>
        <el-table-column prop="address" label="充值季度人数"> </el-table-column>
        <el-table-column prop="address" label="充值季度金额"> </el-table-column>
        <el-table-column prop="address" label="充值年度人数"> </el-table-column>
        <el-table-column prop="address" label="充值年度金额"> </el-table-column>
        <el-table-column prop="address" label="充值总人数"> </el-table-column>
        <el-table-column prop="address" label="充值总金额"> </el-table-column>
        <el-table-column prop="address" label="新增充值人数"> </el-table-column>
        <el-table-column prop="address" label="新增充值金额"> </el-table-column>
        <el-table-column prop="address" label="续费人数"> </el-table-column>
      </el-table>
      <pagination
        :total="total1"
        :page.sync="page1"
        :limit.sync="pageSize1"
        @pagination="getList1"
      />
    </el-card>
    <!-- 提现数据 -->
    <el-card v-if="active == 2">
      <div class="searchBox">
        <h3><span class="tt"></span> 提现统计</h3>
        <div>
          <el-radio-group v-model="type1" size="small" fill="#7b94d8">
            <el-radio-button label="1">今日</el-radio-button>
            <el-radio-button label="2">本月</el-radio-button>
            <el-radio-button label="3">总计</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <el-row class="cardRow" :gutter="20">
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              总提现金额
            </h3>
            <h1>
              <i class="el-icon-coin"></i>
              300
            </h1>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              总提现人数
            </h3>
            <h1>
              <i class="el-icon-user"></i>
              300
            </h1>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card v-if="active == 2" style="margin-top: 20px">
      <div class="searchBox">
        <h3>
          <div class="tt"></div>
          宝石提现详情
        </h3>
        <div class="right">
          <span class="txt">性别：</span>
          <el-select
            class="sexselect"
            v-model="sex3"
            placeholder="请选择性别"
            size="small"
          >
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="txt">平台：</span>
          <el-select
            class="channelselect"
            v-model="channel3"
            placeholder="请选择平台"
            size="small"
          >
            <el-option label="不限" value=""> </el-option>
            <el-option label="苹果" value="1"> </el-option>
            <el-option label="安卓" value="2"> </el-option>
          </el-select>
          <span class="txt" style="margin-left: 10px">时间：</span>
          <el-date-picker
            size="small"
            v-model="timeArr3"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focusC"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        :data="tableData3"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="name" label="总提现人数"> </el-table-column>
        <el-table-column prop="address" label="首提人数"> </el-table-column>
        <el-table-column prop="address" label="提现金额"> </el-table-column>
        <el-table-column prop="address" label="提现消耗宝石数量">
        </el-table-column>
      </el-table>
      <pagination
        :total="total3"
        :page.sync="page3"
        :limit.sync="pageSize3"
        @pagination="getList3"
      />
    </el-card>
    <!-- 利润报表 -->
    <el-card v-if="active == 3">
      <div class="searchBox">
        <h3>
          <div class="tt"></div>
          数据总览
        </h3>
      </div>
      <div class="searchBox1">
        <el-radio-group v-model="dayType" size="small" fill="#7b94d8">
          <el-radio-button label="1">今日</el-radio-button>
          <el-radio-button label="2">昨日</el-radio-button>
          <el-radio-button label="3">近7日</el-radio-button>
        </el-radio-group>
        <div class="right">
          <el-date-picker
            size="small"
            v-model="timeArrB"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focusB"
          >
          </el-date-picker>
          <el-button
            style="margin-left: 10px"
            class="btn"
            icon="el-icon-search"
            size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-row class="cardRow1" :gutter="20">
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              平台金币消耗
            </h3>
            <h1>
              <i class="iconfont" style="font-size: 38px">&#xeb19;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              平台金币余量
            </h3>
            <h1>
              <i class="iconfont" style="font-size: 38px">&#xeb19;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              平台宝石消耗
            </h3>
            <h1>
              <i class="iconfont">&#xe65b;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              平台宝石余量
            </h3>
            <h1>
              <i class="iconfont">&#xe65b;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              平台利润
            </h3>
            <h1>
              <i class="iconfont">&#xe721;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-if="active == 3" style="margin-top: 20px">
      <div class="searchBox">
        <h3>
          <div class="tt"></div>
          详情表
        </h3>
        <div class="right">
          <span class="txt">展示方式：</span>
          <el-select
            class="sexselect"
            v-model="chooseDayType"
            placeholder="请选择性别"
            size="small"
          >
            <el-option label="日" value="1"> </el-option>
            <el-option label="周" value="2"> </el-option>
            <el-option label="月" value="3"> </el-option>
          </el-select>
          <span class="txt" style="margin-left: 10px">时间：</span>
          <el-date-picker
            size="small"
            v-model="timeArr4"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focusD"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        :data="tableData4"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="name" label="总提现人数"> </el-table-column>
        <el-table-column prop="address" label="首提人数"> </el-table-column>
        <el-table-column prop="address" label="提现金额"> </el-table-column>
        <el-table-column prop="address" label="提现消耗宝石数量">
        </el-table-column>
      </el-table>
      <pagination
        :total="total4"
        :page.sync="page4"
        :limit.sync="pageSize4"
        @pagination="getList4"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  data() {
    return {
      active: "1",
      type: "1",
      sex: "",
      channel: "",
      timeArr: [],
      startTime: "",
      endTime: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      //VIP付费
      sex1: "",
      channel1: "",
      timeArr1: [],
      startTime1: "",
      endTime1: "",
      tableData1: [],
      total1: 0,
      page1: 1,
      pageSize1: 10,
      //提现统计
      type1: "1",
      // myChart: null,
      sex3: "",
      channel3: "",
      timeArr3: [],
      startTime3: "",
      endTime3: "",
      tableData3: [],
      total3: 0,
      page3: 1,
      pageSize3: 10,
      //利润报表
      dayType: "1",
      timeArrB: [],
      startTimeB: "",
      endTimeB: "",
      chooseDayType: "1",
      tableData4: [],
      total4: 0,
      page4: 1,
      pageSize4: 10,
      timeArr4: [],
      startTime4: "",
      endTime4: "",
      //通用
      channelOptions: [],
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      sexOptions: [
        {
          value: "",
          label: "不限",
        },
        {
          value: "1",
          label: "男",
        },
        {
          value: "2",
          label: "女",
        },
      ],
    };
  },
  methods: {
    focus() {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startTime = this.timeArr[0];
      this.endTime = this.timeArr[1];
    },
    focusA() {
      if (!this.timeArr1) {
        this.timeArr1 = [];
      }
      this.startTime1 = this.timeArr1[0];
      this.endTime1 = this.timeArr1[1];
    },
    focusC() {
      if (!this.timeArr3) {
        this.timeArr3 = [];
      }
      this.startTime3 = this.timeArr3[0];
      this.endTime3 = this.timeArr3[1];
    },
    focusB() {
      if (!this.timeArrB) {
        this.timeArrB = [];
      }
      this.startTimeB = this.timeArrB[0];
      this.endTimeB = this.timeArrB[1];
    },
    focusD() {
      if (!this.timeArr4) {
        this.timeArr4 = [];
      }
      this.startTime4 = this.timeArr4[0];
      this.endTime4 = this.timeArr4[1];
    },
    getList() {},
    getList1() {},
    getList3() {},
    getList4() {},
  },
  mounted() {},
  watch: {
    dayType: {
      handler(newName, oldName) {
        if (newName == 1) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          this.timeArrB = [time, time];
          this.startTimeB = time;
          this.startTimeB = time;
        } else if (newName == 2) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArrB = [time1, time];
          this.startTimeB = time1;
          this.startTimeB = time;
        } else if (newName == 3) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000 * 6;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArrB = [time1, time];
          this.startTimeB = time1;
          this.startTimeB = time;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.WaterAnalysis {
  padding: 20px;
  //通用
  .searchBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      margin: 0;
      display: flex;
      align-items: center;
      .tt {
        display: inline-block;
        width: 5px;
        height: 18px;
        margin-right: 5px;
        background-color: #7b94d8;
      }
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
  .searchBox1 {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  .txt {
    display: inline-block;
    height: 32px;
    background-color: #f5f7fa;
    line-height: 32px;
    padding-left: 10px;
    color: #9d9399;
    border-radius: 4px 0 0 4px;
    border: 1px solid #dcdfe6;
    border-right: none;
  }
  /deep/ .el-input__inner {
    border-radius: 0 4px 4px 0 !important;
  }
  .sexselect {
    width: 100px;
    margin: 0 10px 0 0;
  }
  //模块
  .cardRow {
    margin-top: 20px;
    .card {
      height: 110px;
      border: 2px solid #ebeff8;
      border-radius: 5px;
      h3 {
        display: flex;
        align-items: center;
        padding-left: 10px;
        .point {
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 5px solid #7b94d8;
          margin-right: 10px;
        }
      }
      h1 {
        margin: 0px 0;
        text-align: right;
        padding-right: 20px;
        i {
          color: #7b94d8;
        }
      }
    }
  }
  .cardRow1 {
    margin-top: 20px;
    .card {
      height: 150px;
      border: 2px solid #ebeff8;
      border-radius: 5px;
      h3 {
        display: flex;
        align-items: center;
        padding-left: 10px;
        .point {
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 5px solid #7b94d8;
          margin-right: 10px;
        }
      }
      h1 {
        margin: 0px 0;
        text-align: right;
        padding-right: 20px;
        i {
          color: #7b94d8;
        }
      }
      .line {
        margin-top: 10px;
        border-top: 2px solid #ebeff8;
      }
      .foot {
        padding: 10px 20px 0;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // .left{

        // }
      }
    }
  }
  .typeBox {
    padding: 20px 0;
  }
  .chart {
    width: 100%;
    height: 400px;
  }
}
</style>